<!--
 * @Author: wgl
 * @Date: 2025-03-02 15:20:32
 * @Description: 
 * 
-->
<template>
  <view class="page-header" :style="headerStyle">
    <text class="header-title">{{ title }}</text>
    <text class="header-subtitle" v-if="subtitle">{{ subtitle }}</text>
    <slot name="title"></slot>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  },
  startColor: {
    type: String,
    default: '#39c5bb'
  },
  endColor: {
    type: String,
    default: '#398dee'
  },
  height: {
    type: String,
    default: '50rpx'
  }
})

const headerStyle = computed(() => ({
  background: `linear-gradient(135deg, ${props.startColor}, ${props.endColor})`,
  padding: `${props.height} 30rpx`
}))
</script>

<style lang="scss" scoped>
.page-header {
  color: #fff;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.8s ease-out;

  &::before {
    content: '';
    position: absolute;
    width: 200rpx;
    height: 200rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100rpx;
    right: -50rpx;
  }

  &::after {
    content: '';
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    bottom: -70rpx;
    left: 30rpx;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-title {
  font-size: 44rpx;
  font-weight: bold;
  display: block;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  letter-spacing: 2rpx;
}

.header-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}
</style>
